<template>
  <div id="list">
    <!-- <h1>搜索歌曲</h1> -->

    <div class="sousuokuang">
      <input
        type="text"
        v-model="text"
        @keyup.enter="sousuoinp(text, $event)"
        @input="sousuotishi"
        placeholder="搜索歌曲、歌手、专辑"
      />
      <div class="xx" v-show="text" @click="text = null">×</div>
    </div>

    <div class="hotsousuo" v-show="!text && !tuijianArray && !songArray">
      <div class="tit">热门搜索</div>
      <div class="hottag">
        <div
          v-for="(hottag, index) of hotsousuoArr"
          :key="index"
          @click="charuinp(hottag.first)"
        >
          {{ hottag.first }}
        </div>
      </div>
    </div>

    <div class="lishijilu" v-show="!text && !tuijianArray && !songArray">
      <div class="tit" v-if="lishiarr">历史记录</div>
      <div
        v-for="(lishi, index) in lishiarr"
        :key="index"
        class="titleTis lisss"
        @click="charuinp(lishi)"
      >
        <span> <span class="iconfont icon-sousuo"></span>{{ lishi }}</span>
        <div @click.stop="dellishi(lishi)">×</div>
      </div>
    </div>

    <div style="color: green" class="titleTis" v-if="loding">正在搜索....</div>

    <div
      style="color: red"
      @click="sousuoinp(text, $event)"
      class="titleTis"
      v-show="text && sousuoShow"
    >
      <span class="iconfont icon-sousuo"></span>搜索“{{ text }}”
    </div>

    <div v-if="jieguo">
      <!-- <h2>结果:{{ jieguo.answer }}</h2> -->

      <img :src="jieguo.image" alt="" />
    </div>

    <ol>
      <SongList
        v-for="song in songArray"
        v-show="!tuijianshow"
        :key="song.id"
        :item="song"
        @AudioId="playson"
        :playing="playing"
        :AudioplaysongId="AudioplaysongId"
        :songlist="songlist"
        @addsonglist="addsong"
        @delsong="$emit('delsong', $event)"
      />

      <!-- <div>歌曲名字: <span style="color: chocolate;" @click="xiangqing(song.id)">{{ song.name }}</span></div>
                <div>id:{{ song.id }}</div>
                <hr> -->
    </ol>

    <ol v-show="tuijianshow">
      <li
        v-for="tuijian in tuijianArray"
        :key="tuijian.id"
        class="titleTis"
        @click="charuinp(tuijian.keyword)"
      >
        <span class="iconfont icon-sousuo"></span> {{ tuijian.keyword }}
      </li>
    </ol>
  </div>
</template>

<script>
import _ from "lodash";
import SongList from "@/components/SongList.vue";

export default {
  components: {
    SongList,
  },

  props: {
    playing: Boolean,
    AudioplaysongId: Number,
    songlist: Array,
  },

  data() {
    return {
      text: "",
      jieguo: "",
      loding: false,
      songArray: null,

      tuijianshow: true,
      tuijianArray: null,

      jieguonull: false,
      sousuoShow: true,

      fangdougetinpt: null,
      fangdougetsong: null,

      hotsousuoArr: null,

      // 历史记录
      lishiarr: JSON.parse(localStorage.getItem("lishijilu")) || null,
    };
  },
  created() {
    this.fangdougetinpt = _.debounce(this.getinput, 500);
    this.fangdougetsong = _.debounce(this.getsong, 300);
    this.gethotsong();
  },

  methods: {
    addsong(songitem) {
      this.axios
        .get("/song/detail", {
          params: {
            ids: songitem.id,
          },
        })
        .then((res) => {
          this.song = res.data.songs[0];
          console.log("列表信息", res.data);

          this.$emit("addsonglist", res.data.songs[0]);
        });
    },

    getinput(newV) {
      // if (this.text) {
      this.axios
        .get("/search", {
          params: {
            keywords: newV,
          },
        })
        .then((resp) => {
          if (resp.data.result.songs && this.text) {
            this.jieguo = resp.data.result.songs;
            this.songArray = [...resp.data.result.songs];
            this.jieguonull = false;
            this.jieguo = true;
            // console.log("返回", resp);
          } else {
            this.jieguonull = true;
          }
        })
        .finally(() => {
          this.loding = false;
        });
      // }
    },

    getsong(vew) {
      if (this.text) {
        this.axios
          .get("/search/suggest", {
            params: {
              keywords: vew,
              type: "mobile",
            },
          })
          .then((resp) => {
            // console.log(resp);

            if (resp.data.result.allMatch && this.text) {
              this.tuijianArray = null;
              this.tuijianArray = [...resp.data.result.allMatch];
              this.jieguonull = false;
            } else {
              this.jieguonull = true;
            }
            // console.log("歌曲信息", this.tuijianArray);

            // this.jieguo = resp.data.result.songs;
            // this.songArray = [...resp.data.result.songs]
          })
          .finally(() => {
            // this.loding = false
          });
      }
    },

    sousuoinp(newval) {
      // console.log(newval, oldval);

      // if (newval && event.keyCode === 13) {

      this.jieguonull = false;
      this.tuijianshow = false;
      this.songArray = null;
      this.loding = true;
      this.sousuoShow = false;

      let setarr = new Set(this.lishiarr || []);

      setarr.add(newval);

      this.lishiarr = [...setarr];

      //   console.log(this.lishiarr);

      if (this.text) {
        this.fangdougetinpt(newval);
      }

      // }
    },

    sousuotishi() {
      this.tuijianshow = true;
      this.jieguo = false;
      this.sousuoShow = true;

      if (!this.text) {
        this.tuijianArray = null;
      } else {
        this.fangdougetsong(this.text);
      }
    },

    charuinp(vals) {
      this.text = vals;
      this.sousuoinp(vals);
    },

    gethotsong() {
      this.axios
        .get("/search/hot")
        .then((resp) => {
          console.log(resp);
          this.hotsousuoArr = resp.data.result.hots;
          console.log(this.hotsousuoArr);
        })
        .finally(() => {
          // this.loding = false
        });
    },

    playson(items) {
      this.axios
        .get("/song/detail", {
          params: {
            ids: items.id,
          },
        })
        .then((res) => {
          this.song = res.data.songs[0];
        //   console.log("列表信息", res.data);

          this.$emit("AudioId", res.data.songs[0]);
        });
    },

    dellishi(delli) {
      this.lishiarr = this.lishiarr.filter((item) => item != delli);
      if (this.lishiarr == []) {
        this.lishiarr = null;
      }
    },
  },
  watch: {
    text(valnul) {
      if (!valnul) {
        this.tuijianArray = null;
        this.songArray = null;
      }
    },
    lishiarr(newval) {
      localStorage.setItem("lishijilu", JSON.stringify(newval));
    },
  },
};
</script>

<style lang="less" scoped>
.titleTis {
  width: 100vw;
  height: 40px;
  padding: 8px 20px;

  border-bottom: 1px solid rgb(235, 235, 235);

  div {
    line-height: 40px;
    padding: 0 20px;
  }
}

.xx {
  position: absolute;
  right: 40px;
  padding: 0 5px;
  border-radius: 15px;
  border: 1px solid;

  transform: scale(0.8);
}

.hotsousuo {
  padding: 20px;

  .tit {
    padding-bottom: 20px;
  }

  .hottag {
    display: flex;
    flex-flow: wrap;

    div {
      padding: 5px 15px;
      margin: 5px 5px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 25px;
    }
  }

  border-bottom: 1px solid rgba(116, 116, 116, 0.1);
}

.lishijilu {
  .tit {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 106, 106, 0.1);
    font-size: 12px;
    color: #ccc;
  }

  .titleTis {
    display: flex;
    justify-content: space-between;
    // align-content: flex-end;

    span {
      line-height: 23px;
    }

    div {
      width: 10vw;
      height: 100%;
      text-align: center;
      padding: 0;
      line-height: 23px;
      transform: scale(1.3);
    }
  }
}

.sousuokuang {
  display: flex;
  align-items: center;
  border: 1px solid #f8f8f8;
  /* 边框颜色 */
  // border-radius: 20px;
  /* 圆角边框 */
  overflow: hidden;
  /* 确保子元素不会超出圆角 */
  // margin: 10px;
  /* 外边距 */
  width: 100vw;
  height: 8vh;

  padding: 0 20px;
  position: relative;
}

.sousuokuang input[type="text"] {
  flex-grow: 1;
  /* 输入框填充剩余空间 */
  border: none;
  /* 无边框 */
  padding: 10px;
  /* 内边距 */
  border-radius: 20px;
  /* 圆角 */
  outline: none;
  /* 聚焦时无轮廓 */
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.sousuokuang input[type="text"]:focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  /* 聚焦时的阴影效果 */
}

/* 可以添加一个搜索图标 */
</style>